<template>
	<view class="flex-col list-item">
		<view class="flex-row">
			<view class="flex-row items-center flex-1">
				<image class="shrink-0 image_5" :src="data.photo" />
				<view class="flex-col items-start flex-1 ml-15">
					<text class="font_2">{{data.name}}</text>
					<text class="mt-16 font_2 text_5">{{data.jobType==0?'全职':'兼职'}}</text>
				</view>
			</view>
			<view class="ml-20 self-start group_6">
				<text class="font_4">￥</text>
				<text class="font_3">{{data.fees}}</text>
				<text class="font_5">/课时</text>
			</view>
		</view>
		<view class="flex-row items-center group_7 mt-5">
			<image class="shrink-0 image_6" src="/static/index/location2.png" />
			<text class="font_6 text_6">{{data.distance|| 0}}km</text>
			<text class="font_7 text_7">{{data.remark}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: {
					name: "",
					fees: "",
					photo: "",
					distance: "",
					remark: "",
					jobType: '',
					lat: 0,
					lng: 0,
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.ml-15 {
		margin-left: 30rpx;
	}

	.mt-5 {
		margin-top: 10rpx;
	}

	.list-item {
		padding: 24rpx 24rpx 24rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;

		.image_5 {
			border-radius: 84rpx;
			width: 108rpx;
			height: 108rpx;
		}

		.font_2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			line-height: 26.02rpx;
			font-weight: 700;
			color: #000000;
		}

		.text_5 {
			line-height: 26.32rpx;
		}

		.group_6 {
			margin-top: 4rpx;
			line-height: 28.48rpx;
			height: 30.58rpx;

			.font_4 {
				font-size: 24rpx;
				font-family: D-DIN;
				line-height: 17.72rpx;
				color: #ff7676;
			}

			.font_3 {
				font-size: 40rpx;
				font-family: D-DIN;
				line-height: 28.48rpx;
				color: #ff7676;
			}

			.font_5 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 22.22rpx;
				font-weight: 700;
				color: #999999;
			}
		}

		.group_7 {
			padding: 0 8rpx;

			.image_6 {
				width: 26rpx;
				height: 26rpx;
			}

			.font_6 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 17.72rpx;
				color: #999999;
			}

			.text_6 {
				margin-left: 8rpx;
				line-height: 17.8rpx;
			}

			.font_7 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 22.22rpx;
				color: #999999;
			}

			.text_7 {
				margin-left: 36rpx;
				line-height: 22.12rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				flex: 1;
			}
		}
	}
</style>